<template>
  <div class="wb-item-question" v-if="qItem">
    <p class="title" @click.stop :style="itemStyle" v-html="qItem.title"></p>
    <ul class="flex-con">
      <li v-for="(question, qIndex) in qItem.questions" :key="qIndex">
        <van-button :ref="setBtnRef" :data-index="qIndex" :style="questionBtnStyles(qIndex)" class="item-in-btn" @click="onQuestionClick($event, qIndex)">{{ question.text }}</van-button>
      </li>
    </ul>
    <div class="number-con" v-if="this.commonAttr.numberUrl" @click.stop>
      <span class="number font-size-24" :style="numberStyle">{{getNumber}}</span>
    </div>
  </div>
</template>
<script>
import { utils } from '@/components/utils/utils'
import { commonUtils } from '@/components/utils/common-utils'
import { DIGIT_MAP } from '@/common/const' 
import { EventBus } from '@/store/index'
import { onBeforeUpdate } from 'vue'
import { getPxOVwByValue } from '@/store/utils'
import { isHasOwnProperty } from '@/plugins/utils'

export default {
  mixins: [utils, commonUtils],
  props: {
    item: Object,
    qItem: Object,
    clickQuestionType: Object,
    ruleValues: Object,
    dimensionIndexs: Array,
    index: Number,
  },
  setup () {
    let btnRefs = []
    // let checkboxsRefs = []
    const setBtnRef = el => {
      btnRefs.push(el)
    }
    onBeforeUpdate(() => {
      btnRefs = []
      // checkboxsRefs = []
    })
    return {
      btnRefs,
      setBtnRef,
    }
  },
  created(){
  },
  computed: {
    numberStyle(){
      return {
        "backgroundImage": "url(" + this.commonAttr.numberUrl + ")",
        "background-repeat": "no-repeat",
        "background-size": "contain",
        "width": getPxOVwByValue(60),
        "height": getPxOVwByValue(27)
      }
    },
    getNumber(){
      return DIGIT_MAP[this.index]
    },
  },
  methods:{
    onQItem(e, index, qIndex, slideTo, resetSwiper){
      const item = this.lists[index];
      let questionItem = item.questions[qIndex];
      if(questionItem.type){
        this.clickQuestionType[index] = {type: parseInt(questionItem.type)};//type 是题的类型  值是 1，2，3
      }
      let slideIndex = index + 1;
      if(slideIndex >= this.lists.length){
        let itemIndex = -1;
        if(isHasOwnProperty(this.ruleValues, "pushIndexMap")){
          //1761 {"rules":[[1,1,1],[1,1,2],[1,1,3],[2,2,2],[2,2,1],[2,2,3],[3,3,3],[3,3,1],[3,3,2],[1,2,3]],"pushIndexMap":{"0":0,"1":0,"2":0,"3":1,"4":1,"5":1,"6":2,"7":2,"8":2,"9":3}}
          itemIndex = this.getItemIndexByCombinationRule();
        }else if(isHasOwnProperty(this.ruleValues, "pushIndexScores")){
          // {"rules":{"1":10,"2":20,"3":"30","4":"40"},"pushIndexScores":[40,90,120,160]}
          itemIndex = this.getItemIndexByScoreRule();
        }else{
          itemIndex = this.getItemIndexByRule();
        }
        if(itemIndex >= 0){
          this.commonAttr.itemIndex = itemIndex
          this.isPropagation = true
        }
        //重置数据和按钮状态
        window.setTimeout(() => {
          this.resetQuestionBtnStatus()
          resetSwiper();
          EventBus.$emit("itemClick", {id: this.item.id, index: itemIndex})
        }, 500)
      }else{
        window.setTimeout(() => {
          slideTo({slideIndex});
        }, 500)
      }
      let jumpUrl = 'carousel_' + index + "_qIndex_" + qIndex
      let comType = "click"
      let wModule = "jump"
      this.onPostStatics(e, { comType, wModule,  jumpUrl })
    },
    getItemIndexByScoreRule() {
      //通过选项对应的分数规则 返回发博索引{"rules":{"1":10,"2":20,"3":"30","4":"40"},"pushIndexScores":[40,90,120,160]}
      let rules = this.ruleValues.rules;//{"1":10,"2":20,"3":"30","4":"40"}
      let clickTotalScore = 0;
      _.forEach(this.clickQuestionType, (item) => {
        clickTotalScore += rules[item.type];
      })
      //更新bindData 全局分数 clickTotalScore
      this.$store.commit('updateBindData', {key: 'score', value: clickTotalScore})
      let searchIndex = 0;
      let pushIndexScores = this.ruleValues.pushIndexScores;
      for(let i = 0, len = pushIndexScores.length; i < len; i++) {
        if(clickTotalScore >= pushIndexScores[i]) {
          searchIndex = i;
        }
      }
      return searchIndex;
    },
    getItemIndexByRule(){
      //只有两道题是有效选项
      const oneDimensional = this.dimensionIndexs[0] - 1;
      const twoDimensional = this.dimensionIndexs[1] - 1;
      //[[1,2,3,4],[1,2,1,4],[2,3,3,1],[3,2,4,4]]
      return this.ruleValues[this.clickQuestionType[oneDimensional].type-1][this.clickQuestionType[twoDimensional].type-1] - 1;
    },
    //获取发博列表索引通过组合规则
    getItemIndexByCombinationRule(){
      let rules = this.ruleValues.rules;//[[1,1,1],[1,1,2],[1,1,3],[2,2,2],[2,2,1],[2,2,1],[3,3,3],[3,3,1],[3,3,2],[1,2,3]]碧桂园答题选四种户型
      let clickRuleTypes = [];//规则中的一种如[1,2,3]
      let searchIndex = -1;
      _.forEach(this.clickQuestionType, (item) => {
        clickRuleTypes.push(item.type);
      })
      for(let i = 0, len = rules.length; i < len; i++){
        let itemRules = _.cloneDeep(rules[i]);
        let length = 0;
        let index = -1;
        _.forEach(clickRuleTypes, (value) => {
          index = itemRules.indexOf(value);
          if(index != -1){
            _.pullAt(itemRules, index);
            length++;
          }
        })
        if(length == clickRuleTypes.length){
          searchIndex = i;
          break;
        }
      }
      return this.ruleValues.pushIndexMap[searchIndex];
    },
   questionBtnStyles(qIndex){
      let styles_ = _.cloneDeep(this.btnStyles);
      if(this.commonAttr.itemBgUrls && this.commonAttr.itemBgUrls.length > 0){
        const bgUrls = this.commonAttr.itemBgUrls.split(',');
        let bgUrl = bgUrls[qIndex];
        if(bgUrl && bgUrl.length > 0){
          styles_.backgroundImage = 'url(' +  bgUrl + ')'
        }
      }
      return styles_;
    },
    onQuestionClick(e, qIndex){
      const btn = e.target;
      let styles_ = btn.style;
      if(this.commonAttr.itemSelectedBgUrls){
        const bgUrls = this.commonAttr.itemSelectedBgUrls.split(',');
        let bgUrl = bgUrls[qIndex] || bgUrls[0];
        if(bgUrl && bgUrl.length > 0){
          styles_.backgroundImage = 'url(' +  bgUrl + ')'
        }
      }else if(this.item.btn && this.item.btn.selectedBGUrl){
        styles_.backgroundImage = 'url(' +  this.item.btn.selectedBGUrl + ')'
      }
      styles_.color = this.item.btn && this.item.btn.commonAttr.selectedColor;
    },
    resetQuestionBtnStatus(){
      let btns = this.btnRefs;
      _.forEach(btns, (btn) => {
        let btn_ = btn.$el;
        btn_.style.color = this.item.btn.commonAttr.color;
        btn_.style.backgroundImage = 'url(' +  this.item.btn.bgUrl + ')';
      })
    }
  },
};
</script>

<style lang="scss">
.wb-item-question{
  width: inherit;
  height: inherit;
  .title{
    text-align: center;
    margin-bottom: var(--size-48);
  }
  p{
    font-size: inherit;
    color: inherit;
    line-height: 1.5;
  }
  .flex-con{
    display: flex;
    flex-direction: row;
    flex: auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .number-con{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;  
    .number{
      display: inline-block;
      text-align: center;
      color: #fdfdfc;
      font-weight: bold;
      width: var(--size-60);
      height: var(--size-28);
    }
  }
}
</style>


